<script setup>
import { reactive, ref, watch } from 'vue'
import MapSettingKonva from './components/MapSettingKonva.vue'
import { inspectionRoute, inspectionCharge } from '@/api/inspection/map-setting'
import { inspectionMap } from '@/api/inspection/resource-manage'
import { ElMessage, ElMessageBox } from 'element-plus'
import chargeIcon from '@/assets/images/common/charge_icon.png'

const konva = ref()

// 列表默认展开类型
const openCollapse = ref('path')

// 地图
const map = reactive({
  id: null,
  url: '',
  visible: false,
  list: []
})
async function openSelectMapDialog() {
  const {
    data: { list = [] }
  } = await inspectionMap.read()
  map.list = list
  map.visible = true
}
function onSelectMap(item) {
  map.visible = false
  map.id = item.id
  map.url = item.url
}

// 路径
const path = {
  preview(raw) {
    konva.value.previewPath(JSON.parse(raw))
  },
  async delete(id) {
    await ElMessageBox.confirm('确认继续操作吗', '警告')
    const { message } = await inspectionRoute.delete(id)
    ElMessage({ type: 'success', message })
    getPathData()
    konva.value.clearLayer()
  }
}
const pathData = ref([])
async function getPathData() {
  const {
    data: { list = [] }
  } = await inspectionRoute.read({ mid: map.id })
  pathData.value = list
}

// 充电点
const charge = {
  preview(x, y, rotation) {
    konva.value.previewCharge(Number(x), Number(y), Number(rotation))
  },
  async delete(id) {
    await ElMessageBox.confirm('确认继续操作吗', '警告')
    const { message } = await inspectionCharge.delete(id)
    ElMessage({ type: 'success', message })
    getChargeData()
    konva.value.clearLayer()
  }
}
const chargeData = ref([])
async function getChargeData() {
  const {
    data: { list = [] }
  } = await inspectionCharge.read({ mid: map.id, rtype: 'inspection' })
  chargeData.value = list
}
function chargePreview(item) {
  let { chargeY: x, chargeX: y, tiltAngle: rotation } = item
  x = Number(x)
  y = Number(y)
  rotation = Number(rotation)
  if (rotation === 3.14) {
    rotation = 0
  } else {
    rotation = 180 - (rotation * 180) / Math.PI
  }
  konva.value.previewPoint(chargeIcon, [{ x, y, rotation }])
}

watch(
  () => map.id,
  () => updateData()
)
function updateData() {
  getPathData()
  getChargeData()
}
</script>

<template>
  <div class="flex">
    <div
      id="left-list"
      class="min-h-[calc(100vh-84px)] min-w-[240px] bg-[#f3f3f3] select-none shadow-2xl"
    >
      <div class="flex flex-col p-4 bg-white">
        <!-- 选择地图弹窗 -->
        <el-button type="primary" size="large" @click="openSelectMapDialog"> 选择地图 </el-button>
        <el-dialog v-model="map.visible" width="800px" title="选择地图">
          <div class="max-h-[500px] overflow-auto grid grid-cols-4 gap-2">
            <div
              v-for="item in map.list"
              :key="item.id"
              class="h-[180px] w-[180px] text-center"
              @click="onSelectMap(item)"
            >
              <el-image class="w-[160px] h-[160px] cursor-pointer" :src="item.url" fit="cover" />
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-dialog>
      </div>
      <el-collapse v-model="openCollapse" accordion>
        <el-collapse-item title="路径列表" name="path">
          <div
            v-for="item in pathData"
            :key="item.id"
            class="h-10 w-[200px] px-3 flex justify-between items-center cursor-pointer hover:bg-[#f3f3f3]"
            @click="path.preview(item.raw)"
          >
            <span>{{ item.name }}</span>
            <el-button link size="small" type="danger" @click.stop="path.delete(item.id)">
              删除
            </el-button>
          </div>
        </el-collapse-item>
        <el-collapse-item title="充电点列表" name="charge">
          <div
            v-for="item in chargeData"
            :key="item.id"
            class="h-10 w-[200px] px-3 flex justify-between items-center cursor-pointer hover:bg-[#f3f3f3]"
            @click="chargePreview(item)"
          >
            <span>{{ item.name }}</span>
            <el-button link size="small" type="danger" @click.stop="charge.delete(item.id)">
              删除
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="min-h-[calc(100vh-84px)] grow relative">
      <MapSettingKonva
        ref="konva"
        :map-id="map.id"
        :map-url="map.url"
        @confirm-success="updateData"
      ></MapSettingKonva>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-collapse-item__header),
:deep(.el-collapse-item__content) {
  padding-left: 20px;
}
</style>
